<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box {
          width: 300px;
          height: 200px;
          border: 1px solid red;
        }
        .mask {
          /* 添加兼容型前缀 */
          -webkit-mask-image: url("/src/img/css3/star.png");
          /* 图片为上图提供的纯黑色的五角星 */
          mask-image: url("/src/img/css3/star.png");
          mask-repeat: no-repeat; /* 遮罩图像重复度 */
          /* 遮罩层图像大小 */
          mask-size: 200px 200px;
        }
      </style>

      <!-- 
        TIP

        mask-size 属性指定遮罩图像的大小，类似于background-size。
      -->

      <div class="box">
        <img src="/src/img/css3/ms.jpg" class="mask" />
      </div>
</body>
</html>